<template>
    <div class="form-group">
        <label for="inputUrl">网址</label>
        <div class="url-input-group">
            <div class="navigation-buttons">
                <button class="nav-button" @click="goBack" :disabled="!canGoBack">
                    <span>←</span>
                </button>
                <button class="nav-button" @click="goForward" :disabled="!canGoForward">
                    <span>→</span>
                </button>
            </div>
            <select v-model="protocol" class="protocol-select">
                <option value="https://">https://</option>
                <option value="http://">http://</option>
            </select>
            <input v-model="inputUrl" class="url-input" placeholder="请输入网址" @keyup.enter="navigate">
            <div class="button-group">
                <button class="primary-button" @click="navigate">前往</button>
                <button class="secondary-button" @click="refresh">刷新</button>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'

// Props
const props = defineProps({
    canGoBack: {
        type: Boolean,
        default: false
    },
    canGoForward: {
        type: Boolean,
        default: false
    },
    currentUrl: {
        type: String,
        default: ''
    }
})

// Emits
const emit = defineEmits([
    'navigate',
    'go-back',
    'go-forward',
    'refresh'
])

// 响应式数据
const protocol = ref('https://')
const inputUrl = ref('')

// 计算完整URL
const fullUrl = computed(() => {
    return inputUrl.value ? protocol.value + inputUrl.value : ''
})

// 导航方法
function navigate() {
    if (fullUrl.value) {
        emit('navigate', fullUrl.value)
    }
}

function goBack() {
    emit('go-back')
}

function goForward() {
    emit('go-forward')
}

function refresh() {
    emit('refresh')
}

// 监听当前URL变化，更新输入框
watch(() => props.currentUrl, (newUrl) => {
    if (newUrl) {
        // 移除协议头并设置到输入框
        const urlWithoutProtocol = newUrl.replace(/^https?:\/\//, '')
        inputUrl.value = urlWithoutProtocol
        // 设置对应的协议
        protocol.value = newUrl.startsWith('https://') ? 'https://' : 'http://'
    }
})

// 暴露数据给父组件
defineExpose({
    protocol,
    inputUrl,
    fullUrl
})
</script>

<style scoped>
.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    font-size: 14px;
    color: #333;
    font-weight: 500;
}

.url-input-group {
    display: flex;
    gap: 8px;
    align-items: center;
}

.navigation-buttons {
    display: flex;
    gap: 4px;
}

.nav-button {
    padding: 6px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
    cursor: pointer;
    transition: all 0.2s;
}

.nav-button:hover:not(:disabled) {
    background-color: #f0f0f0;
}

.nav-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.nav-button span {
    font-size: 16px;
    line-height: 1;
}

.protocol-select {
    width: 100px;
    padding: 6px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
}

.url-input {
    flex: 1;
    padding: 6px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

.button-group {
    display: flex;
    gap: 8px;
}

.primary-button,
.secondary-button {
    padding: 6px 12px;
    border-radius: 4px;
    border: none;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.primary-button {
    background-color: #1890ff;
    color: white;
}

.primary-button:hover {
    background-color: #40a9ff;
}

.secondary-button {
    background-color: #f0f0f0;
    color: #333;
}

.secondary-button:hover {
    background-color: #d9d9d9;
}
</style>